<template>
    <div>
        <el-form ref="form" label-width="80px" size="normal">
            <el-form-item label="占位提示" v-if="formType==='search'">
                <el-input v-model="search.placeholder" @input="changeValue('placeholder')" size="mini"></el-input>
            </el-form-item>
            <template v-else-if="formType == 'promotion'">
                <el-form-item label="类型">
                    <el-radio-group v-model="promotion.listType" @change="changeValue('listType')">
                        <el-radio label="group">拼团</el-radio>
                        <el-radio label="flash">限时活动</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="promotion.title" size="mini" style="width:200px;" @input="changeValue('title')">
                    </el-input>
                </el-form-item>
                <el-form-item label-width="0">
                    <div class="choose-course-btn">
                        <el-button icon="el-icon-circle-plus-outline" type="text" @click="handleChooseCourse">关联课程
                        </el-button>
                        <span>最多关联10门</span>
                    </div>
                </el-form-item>
                <drag-course :list="promotion.data" @del="deleteCourse"></drag-course>
            </template>
            <template v-if="formType==='list'">
                <el-form-item label="类型">
                    <el-radio-group v-model="list.listType" @input="changeValue('listType')">
                        <el-radio label="one">
                            单栏
                        </el-radio>
                        <el-radio label="two">
                            双栏
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="list.title" @input="changeValue('title')" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="更多">
                    <el-radio-group v-model="list.showMore" @input="changeValue('showMore')">
                        <el-radio :label="true">
                            显示
                        </el-radio>
                        <el-radio :label="false">
                            隐藏
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="更多链接">
                    <el-button type="default" size="mini" @click="handleChoosePage">{{ list.more ? list.more.title :
                        '选择页面' }}</el-button>
                </el-form-item>
                <el-form-item label-width="0">
                    <div class="choose-course-btn">
                        <el-button icon="el-icon-circle-plus-outline" type="text" @click="handleChooseCourse">关联课程
                        </el-button>
                        <span>最多添加10门课程</span>
                    </div>
                </el-form-item>
                <drag-course :list="list.data" @del="deleteCourse"></drag-course>
            </template>
            <template v-else-if="formType == 'swiper'">
                <el-form-item label-width="0">
                    <div class="choose-course-btn">
                        <el-button icon="el-icon-circle-plus-outline" type="text" @click="createSwiper">新增轮播图
                        </el-button>
                        <span>最多5张</span>
                    </div>
                </el-form-item>
                <drag-swiper :list="swiper.data" @del="deleteSwiper"></drag-swiper>
            </template>
            <template v-else-if="formType == 'icons'">
                <el-form-item label-width="0">
                    <div class="choose-course-btn">
                        <el-button icon="el-icon-circle-plus-outline" type="text" @click="createIcon">新增分类</el-button>
                        <span>最多8张</span>
                    </div>
                </el-form-item>
                <drag-icons :list="icons.data" @del="deleteIcons"></drag-icons>
            </template>
            <template v-else-if="formType == 'imageAd'">
                <el-form-item label-width="0">
                    <div class="choose-course-btn">
                        <el-button icon="el-icon-circle-plus-outline" type="text" @click="createImageAd">新增图片
                        </el-button>
                    </div>
                </el-form-item>
                <drag-swiper :list="imageAd.data" @del="deleteSwiper"></drag-swiper>
            </template>
        </el-form>

        <choose-course ref="chooseCourse"></choose-course>
        <choose-page ref="choosePage"></choose-page>
        <upload-image ref="uploadImage"></upload-image>
    </div>
</template>
<script>
    import DragCourse from './drag-course.vue'
    import chooseCourse from '@/components/chooseCourse/index.vue'
    import choosePage from './choose-page.vue'
    import DragSwiper from './drag-swiper.vue'
    import uploadImage from './upload-image.vue'
    import dragIcons from './drag-icons.vue'
    export default {
        name: 'component-form',
        props: {
            formType: {
                type: String,
                default: ''
            }
        },
        components: {
            DragCourse,
            chooseCourse,
            choosePage,
            uploadImage,
            DragSwiper,
            dragIcons
        },
        provide() {
            return {
                componentForm: this
            }
        },
        data() {
            return {
                search: {
                    placeholder: ''
                },
                list: {
                    listType: 'one',
                    title: '',
                    showMore: true,
                    more: false,
                    data: []
                },
                swiper: {
                    data: []
                },
                icons: {
                    data: []
                },
                imageAd: {
                    data: []
                },
                promotion: {
                    listType: "group",
                    title: "",
                    data: []
                },
            };
        },
        methods: {
            createImageAd() {
                if (this.imageAd.data.length === 1) {
                    return this.$message({
                        type: "error",
                        message: "最多只能创建1个"
                    })
                }
                this.imageAd.data.push({
                    src: "https://dummyimage.com/365x150",
                    type: "", // 课程course,网页地址webview
                    course_title: "",
                    course_id: "",
                    url: ""
                })
            },
            // 打开选择课程框
            openChooseCourse(callback, limit) {
                this.$refs.chooseCourse.show(callback, limit)
            },
            // 新增轮播图
            createSwiper() {
                if (this.swiper.data.length >= 5) {
                    return this.$message({
                        type: "error",
                        message: "最多只能创建5个"
                    })
                }
                this.swiper.data.push({
                    src: "https://dummyimage.com/365x150",
                    type: "", // 课程course,网页地址webview
                    course_title: "",
                    course_id: "",
                    url: ""
                })
            },
            createIcon() {
                if (this.icons.data.length === 8) {
                    return this.$message({
                        type: "error",
                        message: "最多只能创建8个"
                    })
                }
                this.icons.data.push({
                    src: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                    name: "分类",
                    type: "",
                    url: "",
                    page_id: 0,
                    page_title: "",
                    course_title: "",
                    course_id: "",
                })
            },
            deleteIcons(index) {
                this.$confirm('是否要删除该分类？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(action => {
                    this.icons.data.splice(index, 1)
                })
            },
            // 删除轮播图
            deleteSwiper(index) {
                this.$confirm('是否要删除该轮播图？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(action => {
                    this[this.formType].data.splice(index, 1)
                })
            },
            // 选择页面
            handleChoosePage() {
                this.$refs.choosePage.open((val) => {
                    this.list.more = val[0]
                }, 1)
            },
            // 删除关联
            deleteCourse(row) {
                this.$confirm('是否要取消关联该课程？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(action => {
                    let i = this[this.formType].data.findIndex(v => v.id == row.id)
                    if (i !== -1) {
                        this[this.formType].data.splice(i, 1)
                        this.$message({
                            message: '取消关联成功',
                            type: 'success',
                        });
                    }
                })
            },
            // 关联课程
            handleChooseCourse() {
                this.$refs.chooseCourse.show((val) => {
                    this[this.formType].data = [
                        ...this[this.formType].data,
                        ...val
                    ]
                    this.changeValue('data')
                }, 10)
            },
             // 监听实时变化
       
            changeValue(key) {
                this.$emit('change', {
                    key,
                    value: this[this.formType][key]
                });
            },
            initVal(val) {
                for (let i in val) {
                    this[val.type][i] = val[i]
                }
            }
        }
    };
</script>
<style>
    .choose-course-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px dotted #13ce66;
    }

    .choose-course-btn span {
        color: #888888;
        font-size: 12px;
    }
</style>